<!-- 油与非油销售占比记录 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
       <div class="dy-panel-content">
        <contentTitle :title="'油与非油销售占比'"></contentTitle>
        <div class="layChart" ref="yyfyxszbRef"></div>
        <div class="layChart-xs12">
          <div class="layChart-xs4">
            <div class="layChart-xs4-img">
              <div class="yp"></div>
            </div>
            <div class="layChart-xs4-content">
              <div class="layChart-xs4-row">
                <div class="r1">{{data_legend[0]}}</div>
                <div>{{data_x[0]}}</div>
              </div>
              <div class="layChart-xs4-rate">
                {{data_x[3]}} %
              </div>
            </div>
          </div>
          <div class="layChart-xs4">
            <div class="layChart-xs4-img">
              <div class="obd"></div>
            </div>
            <div class="layChart-xs4-content">
              <div class="layChart-xs4-row">
                <div class="r1">{{data_legend[1]}}</div>
                <div>{{data_x[1]}}</div>
              </div>
              <div class="layChart-xs4-rate2">
                {{data_x[4]}} %
              </div>
            </div>
          </div>
          <div class="layChart-xs4">
            <div class="layChart-xs4-img">
              <div class="fy"></div>
            </div>
            <div class="layChart-xs4-content">
              <div class="layChart-xs4-row">
                <div class="r1">{{data_legend[2]}}</div>
                <div>{{data_x[2]}}</div>
              </div>
              <div class="layChart-xs4-rate2">
                {{data_x[5]}} %
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="layer-bottom">
        <div class="pd_abItems-contain" style="justify-content: left">
          <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange"  filterable clearable></el-cascader>
          </div>
          <div class="pd_abItems-main">
            <div v-for="(item,index) in abItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
          </div>
          <el-date-picker
              class="custom-date-picker"
              v-model="today"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
          <div class="pd-abItem-search" style="position: relative">
            <button class="pd-abItem-search-btn" @click="search">查询</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {drawLine} from "../../../util/chartUtil.js";
import {ajaxRequest} from "../../../api/code.js";


const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: '滦州服务区',
    label: '滦州服务区'
  }, {
    id: 0,
    value: '丰润停车区',
    label: '丰润停车区'
  }]
}])

getFwqxx();

const curServer = ref("")
const serverHandleChange = (selectItem) => {
  curServer.value = selectItem
  
}

const areacode = ref(null)
const abItems = ref([{title:'综合',clazz:'selected'},{title:'东(南)',clazz:''},{title:'西(北)',clazz:''}])
const abItemsClick = function (item){
  abItems.value.forEach((res,i)=>{
    res.clazz = res.title === item.title?'selected':"";
  })
  if(item.title === '综合'){
    areacode.value = null
  }
  else if(item.title === '东(南)'){
    areacode.value = "01"
  }
  else if(item.title === '西(北)'){
    areacode.value = "02"
  }
}

function formatDate(date) {
  function padZero(num) {
    return num < 10 ? '0' + num : num;
  }
  var year = date.getFullYear();
  var month = padZero(date.getMonth() + 1);
  var day = padZero(date.getDate());
  return `${year}-${month}-${day}`;
}

const now = new Date();
// 设置月份为0（即1月），日期设置为1，时分秒设置为0
// now.setMonth(0, 1);
// now.setHours(0, 0, 0, 0);
// 设置查询开始日期为本月第一天
const today = ref([new Date(now.getFullYear(), now.getMonth(), 1),new Date()]);
const search = function (){
  refreshData()
}

const data_legend = ref(['汽油','柴油','非油']);
const data_x = ref([2111,2323,2441,(2111*100/(2111+2323)).toFixed(2),(2323*100/(2111.08+2323)).toFixed(2),(2441*100/(2111+2323)).toFixed(2)]);


const data_1 = ref(data_x.value[0]);
const data_2 = ref(data_x.value[1]);
const data_3 = ref(data_x.value[2]);
const data_total = ref(data_1.value + data_2.value + data_3.value);

const yyfyxszbRef = ref();
const yyfyxszbOpt = ref({
  angleAxis: {
    show: false,
    max: data_total.value,
    type: 'value',
    startAngle: 180,
    endAngle: 0,
    splitLine: {
      show: false
    }
  },
  barMaxWidth: 18, //圆环宽度
  radiusAxis: {
    show: false,
    type: 'category',
  },
  //圆环位置和大小
  polar: {
    center: ['50%', '80%'],
    radius: '260'
  },
  series: [{
    type: 'bar',
    data: [{
      value: data_1.value,
      itemStyle: {
        color: '#F83874',
      },
    }],
    barGap: '-100%',
    coordinateSystem: 'polar',
    roundCap: true,
    z: 4
  },
  { //中层圆环，显示最大值
      name: data_legend.value[1],
      type: 'bar',
      data: [{
        value: data_1.value + data_2.value,
        itemStyle: {
          color: '#3589DE',
          borderWidth: 0,
        },
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 1
    },
  { //下层圆环，显示最大值
      name: data_legend.value[2],
      type: 'bar',
      data: [{
        value: data_1.value + data_2.value + data_3.value ,
        itemStyle: {
          color: '#43FF33',
          borderWidth: 0,
        },
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 0
    },
    //仪表盘
    {
      type: 'gauge',
      startAngle: 180, //起始角度，同极坐标
      endAngle: 0, //终止角度，同极坐标
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLabel: {
        show: false
      },
      pointer: { // 分隔线
        show: false,
        width: 0
      },
      itemStyle: {
        color: '#70D5FF'
      },
      detail: {
        formatter: function(params) {
          return '{a|' + data_total.value + '}\n{b|总营收(万元)}'
        },
        textStyle: {
          rich: {
            a: {
              fontSize: 34,
              color: '#FFF',
              fontWeight: 'bold'
            },
            b: {
              fontSize: 22,
              color: '#FFF',
            },
          }
        },
        offsetCenter: [0, 50],
      },
      title: {
        show: false
      },
      data: [{}]
    }
  ]
});

let yyfyxszbChart
onMounted(() => {
  yyfyxszbChart = drawLine(yyfyxszbRef.value,yyfyxszbOpt.value);
  refreshData();
})

async function refreshData() {
  let startdate,enddate;
  //手动输入
  if(today.value[0].$d){
    startdate = formatDate(today.value[0].$d)
    enddate = formatDate(today.value[1].$d)
  }else{
    startdate = formatDate(today.value[0])
    enddate = formatDate(today.value[1])
  }

  const params = {
    compid: curServer.value?curServer.value[1]:null,
    areacode:areacode.value,
    startdate:startdate,
    enddate:enddate
  }

  
  data_x.value=[]
  const result = await ajaxRequest('post', 'getYyfyxszb', params)
  if (result.data && result.data.rows.length>0) {
    data_x.value=[]
    result.data.rows.forEach((item,index)=>{
      data_x.value.push(item.qysum)
      data_x.value.push(item.cysum)
      data_x.value.push(item.fypsum)
      data_x.value.push(item.qysumratio)
      data_x.value.push(item.cysumratio)
      data_x.value.push(item.fypsumratio)
    })
  }else{
    data_x.value = [0,0,0,0,0,0]
  }
  data_1.value = data_x.value[0];
  data_2.value = data_x.value[1];
  data_3.value = data_x.value[2];
  data_total.value = (data_1.value + data_2.value + data_3.value).toFixed(2);
  
  yyfyxszbOpt.value.angleAxis.max = data_total.value
  yyfyxszbOpt.value.series[0].data[0].value = data_1.value
  yyfyxszbOpt.value.series[1].data[0].value = (data_1.value + data_2.value).toFixed(2)
  yyfyxszbOpt.value.series[2].data[0].value = (data_1.value + data_2.value + data_3.value).toFixed(2)
  yyfyxszbChart.setOption(yyfyxszbOpt.value)

}

/**
 * 获取服务区档案信息
 */
 async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}
</script>

<style scoped>
.dy-panel-main{
  padding:2.5vh;
}

.layer-bottom{
  padding-left:5vh;
  padding-top: 2vh;
  padding-bottom: 1vh;
  border-top: 2px solid #1D4F59;
}

:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 16.3vh;
  margin-right: 2vh;
}
:deep(.custom-date-picker){
  width: 22vh !important; /* 确保您的样式被应用 */
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}

</style>